<template>
	<view>
		<view class="centem-body">
			<!-- 顶部图片 -->
			<view class="data-clerk">
				<view class="data-clerk-text">
					<view class="data-clerk-text-h">
						相濡以沫
					</view>
					<view class="data-clerk-text-w">
						山林不向四季发誓，荣枯随缘
					</view>
				</view>
				<view class="data-img">
					<image class="fengrui-img" src="../../static/down/upload.svg" mode="scaleToFill"></image>
				</view>
			</view>

			<!-- 标题 -->
			<view class="down-view-all list-li-left-h" style="margin-top: -30upx;">
				<span class="down-view-ruan">◉</span>{{detailData.fr_down_title}}
				<view class="down-view-title-dscr">
					{{ detailData.title.rendered }}
				</view>
			</view>

			<!-- 激励视频下载附件样式 -->
			<block v-if="is_show_down == true">
				<view class="down-view-all" v-if=" detailData.fr_down_url != ''  ">
					<button class="down-btn-video" @tap="getVideoAd()">
						<view class="down-btn-video-icon">
							<image class="fengrui-img" src="../../static/data/ad_video.svg" mode=""></image>
						</view>
						获取附件内容
					</button>
				</view>
			</block>


			<!-- 下载附件内容 -->
			<block v-if="is_show_down == false">
				<!-- 附件下载方式为复制链接 -->
				<block v-if="detailData.fr_down_style == '0' ||  detailData.fr_down_style == ''">
					<view class="down-view-all" v-if=" detailData.fr_down_url != ''  ">
						<view class="down-user">
							<view class="down-user-img">
								<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
							</view>
							<view class="down-user-name">
								ZIP包
							</view>
						</view>

						<view class="down-network-view">
							<text class="down-network-describe" user-select="true">
								{{detailData.fr_down_url}}
							</text>
							<!-- <view class="down-network-icon">
									<image class="fengrui-img"
										style="width: 70%;height: 70%;margin: 19upx auto 0upx auto;display: block;"
										src="../../static/data/renking-1.svg" mode="aspectFit"></image>
								</view> -->
						</view>
						<view class="down-list-btn">
							<!-- <button class="down-btn" type="default" @tap="tapDownUrl(detailData.fr_down_url)">复制链接</button> -->
							<button class="down-btn-key" type="default"
								v-if="detailData.fr_down_key != ''">提取码:{{ detailData.fr_down_key }}</button>
						</view>
						<view class="down-list-btn-text">
							<span class="que-user-red">*</span>
							长按链接手动复制
						</view>
					</view>

					<!-- 备用网盘下载 -->
					<view class="down-view-all" v-if=" detailData.fr_down_url_alter != '' ">
						<view class="titel-h">
							备用资源
						</view>
						<view class="down-network-view">
							<text class="down-network-describe" user-select="true">
								{{detailData.fr_down_url_alter}}
							</text>
							<!-- <view class="down-network-icon">
									<image class="fengrui-img"
										style="width: 70%;height: 70%;margin: 19upx auto 0upx auto;display: block;"
										src="../../static/data/renking-10.svg" mode="aspectFit"></image>
								</view> -->
						</view>
						<view class="down-list-btn">
							<!-- <button class="down-btn" type="default" @tap="tapDownUrl(detailData.fr_down_url_alter)">复制链接</button> -->
							<button class="down-btn-key" type="default"
								v-if="detailData.fr_down_key_alter != ''">提取码:{{ detailData.fr_down_key_alter }}</button>
						</view>

						<view class="down-list-btn-text">
							<span class="que-user-red">*</span>
							长按链接手动复制
						</view>

					</view>
				</block>

				<!-- 附件下载为直接下载方式 -->
				<block v-else>
					<view class="down-view-all" v-if=" detailData.fr_down_url != ''  ">
						<view class="down-user">
							<view class="down-user-img">
								<image class="fengrui-img" src="../../static/my/user.png" mode="aspectFill"></image>
							</view>
							<view class="down-user-name">
								ZIP包
							</view>
						</view>
						<view class="down-file">
							<block v-for="(item ,index) in fileIcon" :key="index">
								<view class="down_file_icon ">
									<image :src="item.img" class="fengrui-img" mode="aspectFit"></image>
								</view>
							</block>
						</view>
						<view class="down-file-txt" v-if="detailData.fr_down_format !=''">
							格 式：{{detailData.fr_down_format}}
						</view>
						<view class="down-file-txt" v-if="detailData.fr_down_size !=''">
							大 小：{{detailData.fr_down_size}}
						</view>
						<view class="down-file-txt" v-if="detailData.fr_down_md5 !=''">
							MD5：{{detailData.fr_down_md5}}
						</view>
						<button class="down-btn-video" @tap="downFile()" :loading="btnFile">
							{{ percentDown }}
						</button>
					</view>
				</block>

			</block>



			<!-- 判断微信流量主 -->
			<!-- #ifdef MP-WEIXIN -->
			<block v-if="about_center.length>0">
				<view class="" style="margin: 30upx 30upx;">
					<ad-custom style="width: 100% !important;" :unit-id="about_center[0].wx_gezi"></ad-custom>
				</view>
			</block>

			<!-- 公众号下载 -->
			<view class="down-view-all" v-if=" detailData.account_key != '' && about_center[0].public_follow != '' ">
				<view class="titel-h">
					公众号下载
				</view>
				<view class="list-li">
					<view class="list-img">
						<image class="fengrui-img" src="../../static/down/down.svg" mode="aspectFill"></image>
					</view>
					<view class="list-li-left">
						<view class="list-li-left-describe">
							关注公众号回复“<text class="que-user-red">{{detailData.account_key}}</text>”下载
						</view>
						<view class="list-btn" @tap="tapWx(about_center[0].public_follow)">
							获取
						</view>
					</view>
				</view>
			</view>

			<!-- 其他平台 -->
			<view class="down-view-all">
				<view class="titel-h">
					其他平台
				</view>
				<view class="down-li-toew">
					<button class="down-icon-list-btn" @tap="wxvideoTap()" v-if="detailData.wxvideo_feedid != ''">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/wx_video_icon.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">
							视频说明
						</view>
					</button>
					<button class="down-icon-list-btn" @tap="tapShop(detailData.xsgoshop)"
						v-if="detailData.xsgoshop != ''">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/renking-8.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">
							商店
						</view>
					</button>
					<button class="down-icon-list-btn" open-type="contact" :send-message-title="posdCenterTitle"
						:send-message-path="posUrl" show-message-card="true">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">
							客服
						</view>
					</button>

					<button class="down-icon-list-btn" open-type="share">
						<view class="down-icon-list-img">
							<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
							</image>
						</view>
						<view class="down-icon-list-img-title">分享</view>
					</button>
				</view>
			</view>
			<!-- #endif -->

			<view class="" style="margin: 38upx;">
				<view class="titel-h">
					申明：
				</view>
				<view class="data-clerk-text-w" style="margin: 30upx 0upx;">
					尊重各网络文件的版权问题，部分软件文件均出自网络，提供下载的软件和资源均为软件或程序作者提供和网友推荐收集整理而来，仅供学习和研究使用。如有侵犯你的版权，请及时通知我们，将立即改正
				</view>
			</view>
		</view>

		<!-- 加载动画 -->
		<view v-if="is_show_login" class="data-login-flex">
			<view class="data-login">
				<image class="fengrui-img" src="../../static/data/loading.gif" mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	// 引入域名和自定义php文件
	import {
		API
	} from '@/components/api.js';
	import {
		Getresources
	} from '@/components/api.js';
	let rewardedVideoAd = null;
	export default {
		data() {
			return {
				xingsu: [],
				// 数据
				about_center: [],
				detailData: [],
				posUrl: '',
				posdCenterID: '',
				is_show_down: true,
				is_show_login: true,
				ShareShow: false,
				passwordKey: '',

				// 直接下载附件
				fileIcon: [{
						img: '../../static/down/apk.svg'
					},
					{
						img: '../../static/down/Excel.svg'
					},
					{
						img: '../../static/down/PPT.svg'
					},
					{
						img: '../../static/down/Word.svg'
					},
					{
						img: '../../static/down/PDF.svg'
					},
					{
						img: '../../static/down/txt.svg'
					},
					{
						img: '../../static/down/zip.svg'
					}
				],
				percentDown: '点击下载附件',
				btnFile: false
			}
		},
		onLoad(posID) {
			// 接受数据
			this.posdCenterID = posID.id;
			this.posUrl = 'pages/download/download?id=' + posID.id;
			this.Getres();
		},
		// 分享好友配置
		onShareAppMessage(res) {
			var that = this;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: that.detailData.title.rendered,
				imageUrl: that.detailData.thumbnailurl,
				path: '/pages/download/download?id=' + this.posdCenterID
			}
		},
		// 文章分享盆友圈 目前支持安卓
		onShareTimeline(res) {
			var that = this;
			return {
				title: that.detailData.title.rendered,
				imageUrl: that.detailData.thumbnailurl,
				path: '/pages/download/download?id=' + this.posdCenterID
			}

		},

		onShow() {
			this.loginSucc()
		},
		methods: {
			// 自定义php接口请求
			Getres: function() {
				var that = this;
				// 请求基本数据
				uni.request({
					url: API + '/wp-json/wp/v2/fengrui',
					success: (res) => {
						// 数据
						that.about_center = res.data;

						that.posdData()
						// 判断是否开启加载动画
						if (res.data[0].if_loading == '0') {
							that.is_show_login = false;
						}
					}
				});
			},

			// 点击更新
			updatauser: function() {
				var that = this;
				uni.navigateTo({
					url: '../meinfo/meinfo'
				})
			},


			// 文章数据
			posdData: function() {
				var that = this;
				uni.request({
					url: API + '/wp-json/wp/v2/posts/' + that.posdCenterID,
					success: (res) => {
						that.CreateAd();
						// 独立文章公告弹窗
						if (res.statusCode == 200) {
							that.detailData = res.data;
							if (that.detailData.pos_notice != '') {
								uni.showModal({
									title: '公告',
									content: that.detailData.pos_notice,
									success: function(res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								console.log('该文章没有设置独立公告')
							};

							// 检查是否需要广告
							if (that.about_center[0].wx_jili_video == '' || that.detailData
								.if_rec_down_video == "0") {
								that.is_show_down = false;
							} else {
								that.is_show_down = true;
							}

							// 关闭加载动画
							that.loginSucc();

						} else {
							// 关闭加载动画
							that.loginSucc();
						}
					}
				});
			},

			// 加载动画
			loginSucc: function() {
				var that = this;
				setTimeout(function() {
					that.is_show_login = false;
				}, 300)
				// that.xingSuUser();
			},

			//初始化激励视频广告组件
			CreateAd: function() {
				var that = this;
				if (that.about_center[0].wx_jili_video != '') {
					if (wx.createRewardedVideoAd) {
						that.videoAd = wx.createRewardedVideoAd({
							adUnitId: that.about_center[0].wx_jili_video
						})
						that.videoAd.onLoad(() => {})
						that.videoAd.onError((err) => {
							// 播放错误下发奖励
							that.is_show_down = false;
						})
						that.videoAd.onClose((res) => {
							if (res && res.isEnded) {
								uni.showToast({
									icon: 'none',
									title: "感谢您的支持"
								})
								that.is_show_down = false;
							} else {
								uni.showToast({
									icon: 'none',
									title: "中途关闭广告"
								})
								that.tarBlack();
							}
						})
					}

				} else {
					console.log('微信没有激励视频广告id')
				}
			},

			// 激励视频
			getVideoAd: function() {
				let that = this;
				// 用户触发广告后，判断设备信息，非手机端不显示广告，若是手机端显示激励视频广告
				wx.getSystemInfo({
					success: (res) => {
						console.log(res.platform)
						if (res.platform == 'mac' || res.platform == 'windows') {
							uni.showToast({
								icon: 'error',
								title: "请使用移动端设备访问"
							})
						} else {
							if (that.videoAd) {
								that.videoAd.show().catch(() => {
									// 失败重试
									that.videoAd.load()
										.then(() => that.videoAd.show())
										.catch(err => {
											console.log('激励视频 广告显示失败', err)
											// 播放错误下发奖励
											that.is_show_down = false;
										})
								})
							}
						}
					}
				})
			},

			// 视频号点击
			wxvideoTap: function() {
				var that = this;
				console.log(that.detailData.wxvideo_id)
				uni.openChannelsActivity({
					finderUserName: that.detailData.wxvideo_id,
					feedId: that.detailData.wxvideo_feedid,
					success: (res) => {
						console.log(res)
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},

			// 打开小商店详情
			tapShop: function() {
				var that = this;
				uni.navigateToMiniProgram({
					appId: that.about_center[0].xs_shop_appid,
					path: 'plugin-private://wx34345ae5855f892d/pages/productDetail/productDetail?productId=' +
						that.detailData.xsgoshop,
					success(res) {
						// 打开成功
					}
				})
			},

			// 访问微信文章
			tapWx: function(wx) {
				var that = this;
				var sve = wx;
				uni.navigateTo({
					url: '../weblist/weblist?aurl=' + sve
				})
				uni.setClipboardData({
					data: that.detailData.account_key,
					success: function() {
						console.log('已自动复制关键字');
					}
				});
			},

			// 密码文章请求
			passPost: function(e) {
				var that = this;
				that.posdData()
				that.is_show_login = true;
			},

			// 复制提取码
			tapDownKey: function(k) {
				var that = this;
				var key = k;
				console.log(k)
				uni.setClipboardData({
					data: key,
					success: function() {
						console.log('success');
					}
				});
			},

			// 没有激励视频直接下载
			tapDownUrl: function(dn) {
				var that = this;
				that.dnurl = dn;
				uni.setClipboardData({
					data: that.dnurl,
					success: function() {
						console.log('success');
					}
				});
			},

			// 点击下载附件
			downFile: function() {
				var that = this;
				that.percentDown = '下载中';
				that.btnFile = true;
				console.log(that.detailData.fr_down_title + '.' + that.detailData.fr_down_format)
				uni.downloadFile({
					url: that.detailData.fr_down_file,
					success(res) {
						console.log(res)
						if (res.statusCode == 200) {
							that.percentDown = '附件下载完成';
							that.btnFile = false;
							uni.showModal({
								title: '下载成功',
								content: '文件以下载完成仅保存一次，请使用转发功能发送到文件管理/我的电脑',
								success: function(frs) {
									if (frs.confirm) {
										console.log('用户点击确定');
										uni.shareFileMessage({
											filePath: res.tempFilePath,
											fileName: that.detailData.fr_down_title + '.' +
												that.detailData.fr_down_format,
											success(data) {
												console.log('转发ok')
											},
										})
									} else if (frs.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						}
					},
				});
			},
		}
	}
</script>

<style>
	/* 关注微信公众号 */
	.que-user-red {
		color: red;
	}

	.account-aout {
		margin-left: 30rpx;
	}

	.account-btn {
		height: 60upx;
		background-color: #1c262a;
		border-radius: 200upx;
		font-size: 24upx;
		width: 150upx;
		color: #FFFFFF;
		flex-shrink: 0;
		margin-right: 0upx;
	}

	.account-describe {
		font-size: 20upx;
		color: #7c7c7c;
	}

	.account-img {
		height: 80upx;
		width: 80upx;
		border-radius: 200upx;
		overflow: hidden;
	}

	.account-flex {
		display: flex;
	}

	.account-view {
		background-color: #f9f9f9;
		border-radius: 20upx;
		height: 120upx;
		margin: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 18upx 30rpx;
	}

	/* 密码访问 */
	.password-title {
		margin: 20upx 0;
		font-weight: bold;
		font-size: 36upx;
		text-align: center;
	}

	.password-desrc {
		width: 70%;
		margin: auto;
		text-align: center;
		font-size: 28upx;
		color: #929292;
	}

	.password-position {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -60%);
	}

	.password-icon {
		height: 500upx;
		width: 100%;
		overflow: hidden;
	}

	/* 加载动画 */
	.data-login {
		height: 70upx;
		width: 70upx;
		margin: auto;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.data-login-flex {
		position: fixed;
		top: 0%;
		left: 0%;
		height: 100%;
		width: 100%;
		z-index: 1030;
		background-color: #f7f7f7; //加载动画背景颜色
	}

	.down-view-ruan {
		color: #23c1aa;
		margin-right: 14upx;
	}

	.down-view-title-dscr {
		padding: 14upx 36upx 30upx 46upx;
		color: #B2B2B2;
		font-size: 24upx;
	}

	.down-icon-list-btn {
		text-align: center;
		margin: 0;
		background-color: unset;
		padding: 0;
	}

	.down-li-toew {
		display: flex;
		margin-top: 60upx;
		align-items: center;
		border-radius: 20upx;
		justify-content: space-around;
	}

	.down-icon-list {
		text-align: center;
	}

	.down-icon-list-img {
		height: 60upx;
		width: 60upx;
		overflow: hidden;
		margin: auto;
	}

	.down-icon-list-img-title {
		font-size: 22upx;
		color: #b1b1b1;
		margin-top: 12upx;
	}

	.down-li-toew-ma {
		margin: 40upx 0upx 20upx 0upx;
	}

	/* 说明 */
	.que-user-red {
		color: red;
	}

	.list-btn {
		height: 50upx;
		width: 160upx;
		background-color: #007AFF;
		border-radius: 100upx;
		text-align: center;
		color: #FFFFFF;
		line-height: 50upx;
		bottom: 0upx;
		position: absolute;
		right: 0;
	}

	/* 列表 */
	.list-li-left-describe {
		color: #D5D5D5;
		font-size: 26upx;
		position: absolute;
		top: 0upx;
		left: 0upx;
	}

	.list-li-tag {
		color: #0BBDA6;
		font-size: 20upx;
	}

	.list-li-left-h {
		font-size: 36upx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.list-li-left {
		margin-left: 32upx;
		flex-grow: 1;
		height: 120upx;
		position: relative;
	}

	.list-img {
		height: 120upx;
		width: 140upx;
		border-radius: 14upx;
		overflow: hidden;
		flex-shrink: 0;
	}

	.list-li {
		display: flex;
		margin-top: 60upx;
		align-items: center;
		background-color: #fff;
		/* padding: 24upx; */
		border-radius: 20upx;
	}

	/* 百度网盘下载 */
	.down-btn {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		border-radius: 100upx !important;
		width: 100%;
		margin: 0upx 10upx;
		font-size: 28upx;
		line-height: 80upx;
		height: 80upx;
	}

	.down-btn-video {
		background-color: #007AFF !important;
		color: #FFFFFF !important;
		border-radius: 100upx !important;
		width: 80%;
		margin: auto;
		font-size: 28upx;
		line-height: 80upx;
		height: 80upx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60upx;
	}

	.down-btn-video-icon {
		height: 46upx;
		width: 56upx;
		margin-top: -6upx;
		margin-right: 8upx;
	}

	.down-btn-key {
		background-color: #23c1aa !important;
		color: #FFFFFF !important;
		border-radius: 100upx !important;
		width: 100%;
		margin: 0upx 10upx;
		font-size: 28upx;
		line-height: 80upx;
		height: 80upx;
	}

	.down-list-btn-text {
		font-size: 22upx;
		color: #B2B2B2;
	}

	.down-list-btn {
		display: flex;
		align-items: center;
		margin-bottom: 10upx;
		margin-top: 22upx;
		overflow: hidden;
	}

	.down-network-icon {
		width: 150upx;
		background-color: #EFEFEF;
		border-radius: 10upx;
		height: 130upx;
		margin-left: 20upx;
		overflow: hidden;
		flex-shrink: 0;
		line-height: 130upx;
		margin: auto;
	}

	.down-network-describe {
		background-color: #EFEFEF;
		border-radius: 10upx;
		padding: 30upx;
		color: #B2B2B2;
		font-size: 24upx;
		/* overflow: hidden; */
		/* word-break: break-all; */
	}

	.down-network-view {
		padding: 30rpx 0upx;
		overflow: hidden;
	}

	.down-user-name {
		margin-left: 20upx;
		font-size: 32upx;
	}

	.down-user-img {
		height: 60upx;
		width: 60upx;
		overflow: hidden;
		border-radius: 200upx;
	}

	.down-user {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		justify-content: flex-start;
	}

	.down-file {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: 70upx 0;
	}

	.down_file_icon {
		height: 44upx;
		width: 44upx;
		opacity: 0.5;
		overflow: hidden;
	}

	.down_file_icon_index {
		height: 80upx;
		width: 80upx;
		opacity: 1;
		overflow: hidden;
	}

	.down-file-txt {
		margin: 14upx 0;
		font-size: 28upx;
		color: #B2B2B2;
	}

	.self-user-updata {
		width: 50upx;
		height: 50upx;
		position: absolute;
		right: 76upx;
	}

	/* 顶部图片 */
	.data-clerk-text-w {
		font-size: 24upx;
		color: #b1b1b1;
	}

	.data-clerk-text-h {
		font-size: 40upx;
		margin-bottom: 20upx;
	}

	.data-clerk-text {
		width: 360upx;
		position: absolute;
		top: 80upx;
		left: 40upx;
	}

	.data-clerk {
		width: 100%;
		height: 300upx;
		position: relative;
	}

	.data-img {
		height: 300upx;
		width: 360upx;
		overflow: hidden;
		position: absolute;
		bottom: 0upx;
		right: 0upx;
	}

	/* 全局 */
	.titel-h {
		font-size: 34upx;
		position: relative;
	}

	/* .titel-h:after {
		content: '';
		position: absolute;
		bottom: -14upx;
		left: 0px;
		width: 96upx;
		height: 8upx;
		border-radius: 200upx;
		background: linear-gradient(90deg, rgba(55, 110, 234, 1) 0%, rgba(255, 255, 255, 1) 100%);
	} */

	.down-view-all {
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding: 38upx;
		margin: 38upx;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	page {
		background-color: #F7F7F7;
	}

	.centem-body {
		/* background-image: linear-gradient(#3482e2, #F7F7F7); */
	}

	button:after {
		border: 0px solid rgba(0, 0, 0, .2);

	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {

		page,
		.data-login-flex {
			background: #161616;
		}

		.down-view-all,
		.account-view,
		.list-li {
			background-color: #202020;
		}

		.down-network-describe,
		.account-btn,
		.down-network-icon {
			background-color: #797979;
		}
	}
</style>